<template>
  <section>
    <header class="animated main-header">
      <!-- LOGO -->
      <span class="logo-min" :style="{width : collapsed ? '45px' : '180px'}">
        <!--<img v-if="collapsed" src='../../assets/img/clpo.png' class="logo_class" alt="U">-->
        <!--<img src='../../assets/img/clpo2.png' class="logo_class" style="width: 150px;height: 45px" alt="U" v-else>-->
        测试demo
      </span>

      <nav :class="collapsed?'nav-close':'nav-expand'">

        <a-icon class="sidebar-toggle" :type="collapsed?'menu-unfold':'menu-fold'" @click.stop.prevent="toggleCollapsed()"></a-icon>
        <a-icon type="clock-circle" class="sidebar-toggle"  @click="showPeriod"/>
        <scroll-text class="nav-announcement" :text="announcement">
        </scroll-text>

        <div class="nav-custom-menu">
          <!-- <span style="padding-top: 10px">
            <a-badge class="badge-bell" :count="count" @click="showNotifications">
              <a-icon class="bell-icon" type="bell"></a-icon>
            </a-badge>
          </span> -->
          <a-dropdown>
            <span class="a-dropdown-link">
              <img v-if="avatar" :src="avatar" style="width: 25px;height: 25px;border-radius: 50%; vertical-align: middle;" alt="U">
              <img src='../../assets/img/头像.svg' style="width: 25px;height: 25px;border-radius: 50%; vertical-align: middle;" alt="U" v-else>
              <span class="username">{{showName}}</span>
              <a-icon type="caret-down" />
            </span>
            <a-menu slot="overlay" @click="handleCommand">
              <a-menu-item key="logout">退出</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </nav>
    </header>
    <a-modal width="60%" title="111" :visible="periodVisible" @cancel="handleCancel" :footer="null" destroyOnClose>

    </a-modal>
  </section>
</template>

<script>
  import {mapGetters, mapMutations, mapState} from 'vuex';
  import VueCookies from "vue-cookies";
  import types from "../../store/types";
  import ReconnectingWebSocket from 'reconnecting-websocket';
  import {httpGet, OA_LOGOUT, RECORD_CLUSTER_INFO, WS_URL,httpPost,DATA_STATIS_TICS} from "../../api/api";
  import ScrollText from "./ScrollText";
  import Notice from "./Notice";
  import moment from 'moment';

  export default {
    components: {
      ScrollText,
      Notice
    },
    data(){
      return {
        websocket: null,
        announcement: "",
        count: 0,
        isExpand: true,
        noticeVisible: false,
        envList: [],
        periodVisible:false,
        periodList:[],
      }
    },
    computed: {
      ...mapState({
        collapsed: 'collapsed',
      }),
      ...mapGetters({
        showName: 'userStore/showName',
        avatar: 'userStore/avatar',
        envId: 'envStore/envId'
      })
    },

    methods: {
      showPeriod(){
        this.periodVisible=true;
      },
      handleCommand(commond) {
        if (commond.key === "logout") {
          httpGet(OA_LOGOUT).then(res => {
            VueCookies.remove("userInfo");
            //重新刷新页面，将vuex中的数据清空
            window.location.reload();
            this.$router.push('/login');
          })
        }
      },
      handleCancel() {
        this.noticeVisible = false
        this.periodVisible = false
        this.periodList = [];
      },
      ...mapMutations({
        toggleCollapsed: types.TOGGLE_COLLAPSED,
      }),
      //使用webSocket来获取数据
      initWebSocket(){
        //ws地址
        this.websocket = new ReconnectingWebSocket(WS_URL);
        this.websocket.onopen = this.onOpen;
        this.websocket.onmessage = this.onMessage;
        this.websocket.onclose = this.onClose;
      },
      onOpen(m) {
      },
      onMessage(m){ //数据接收
        this.count = JSON.parse(m.data);
      },
      onClose(m){  //关闭
        //this.websocket = new ReconnectingWebSocket(WS_URL);
      }
    },
    created(){
      //this.initWebSocket();
      //this.getAnnouncement();
      //this.getEnvList();
    },
    mounted() {
    },
    destroyed() {
      //this.onClose();
    }
  }
</script>

<style scoped lang="less">
  .animated {
    animation-duration: .2s;
  }

  .main-header {
    position: fixed;
    min-width: 100%;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
    z-index: 201;
    animation-name: slideInDown;
    animation-fill-mode: both;
    color: #48576a;
    background-color: #ffffff;
  }

  .main-header a {
    text-decoration: none;
    color: #48576a;
  }

  .logo-large {
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    display: block;
    float: left;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    width: 180px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0 15px;
    font-weight: 300;
    overflow: hidden;
    text-decoration: none;
    border-bottom: 0 solid transparent;
    background: #002140;
  }

  .logo-min {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    display: block;
    float: left;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    /*width: 45px;*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0 5px;
    font-weight: 300;
    overflow: hidden;
    text-decoration: none;
    border-bottom: 0 solid transparent;
    background: #001529;
  }

  .nav-expand {
    -webkit-transition: margin-left 0.3s ease-in-out;
    -o-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
    margin-bottom: 0;
    margin-left: 180px;
    border: none;
    min-height: 50px;
    border-radius: 0;
    /*background-color: #ffffff;*/
  }

  .nav-close {
    -webkit-transition: margin-left 0.3s ease-in-out;
    -o-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
    margin-bottom: 0;
    margin-left: 45px;
    border: none;
    min-height: 50px;
    border-radius: 0;
    /*background-color: #ffffff;*/
  }
  .sidebar-toggle {
    float: left;
    background-color: transparent;
    background-image: none;
    padding: 15px 15px;
    line-height: 20px;
    display: block;
  }

  .sidebar-toggle:hover {
    background: #f9f9f9;
  }

  /*@media (max-width: 800px) {

    .main-header .logo {
      display: none;
    }

    .main-header .nav {
      margin: 0;
    }

    .main-header .logo, .main-header .nav {
      width: 100%;
      float: none;
    }

  }*/

  .nav-announcement {
    padding-left: 30px;
    padding-right: 30px;
    float: left;
    height: 50px;
    width: calc(100% - 450px);
    line-height: 50px;
  }

  .nav-custom-menu {
    min-height: 50px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
  }

  .nav-custom-menu .a-dropdown-link {
    cursor: pointer;
    height: 50px;
    min-width: 50px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;

    .username{
      display: inline-block;
      margin: 0 5px;
    }
  }

  .nav-custom-menu .a-dropdown-link img {
    background-color: #108ee9;
  }

  .nav-custom-menu .a-dropdown-link:hover {
    background: #f9f9f9;
  }

  .env-choose {
    margin-top: 10px;
    width: 200px;
  }

  .badge-bell {
    margin-top: 15px;
    margin-right: 30px;
    //cursor: pointer;
    //height: 50px;
  }

  .bell-icon {
    background-color: transparent;
    background-image: none;
    padding: 0 5px;
    font-size: 20px;
  }

  .logo_class{
    display: inline-block;
    height: 35px;
    border-radius: 5%;
    vertical-align: middle;
  }

</style>
